<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Declarative Rendering</title>
        <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
        <style>
            @media screen and (min-width: 960px) {
                body {
                    width: 960px;
                    margin: 0 auto;
                }
            }

            h6 {
                margin: 8px 0;
                padding-top: 3px;
                border-top: 2px solid #1a5ae4;
            }

            h6::after {
                content: ':';
            }

            code {
                font-family: 'Roboto Mono', Monaco, courier, monospace;
                color: #e96900;
                padding: 3px 5px;
                margin: 0 2px;
                border-radius: 2px;
                white-space: nowrap;
                font-size: 0.8em;
                background-color: #f8f8f8;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h6>常规用法</h6>
            <input v-model="user.name" placeholder="用户名"><br>
            <textarea cols="21" rows="3" v-model="user.desc"></textarea><br>
            <label><input type="checkbox" v-model="user.admin">是否是管理员</label><br>
            爱好:
            <label><input type="checkbox" value="Coding" v-model="user.hobby">Coding</label>
            <label><input type="checkbox" value="羽毛球" v-model="user.hobby">羽毛球</label>
            <label><input type="checkbox" value="篮球" v-model="user.hobby">篮球</label>
            <label><input type="checkbox" value="听歌" v-model="user.hobby">听歌</label>
            <label><input type="checkbox" value="电影" v-model="user.hobby">电影</label><br>
            性别:
            <select v-model="user.sex">
                <option value="男">-- 男 --</option>
                <option value="女">-- 女 --</option>
            </select><br>
            技能:
            <select v-model="user.skill" multiple>
                <option v-for="skill in skills" :value="skill.value" v-text="skill.name"></option>
            </select><br>

            <p>
                {{user}}
            </p>
            <h6>修饰符</h6>
            <ul>
                <li><code>.lazy</code> 添加后 <code>v-model</code> 的值将会在 <code>change</code> 事件后同步值(未添加时是在 <code>input</code> 事件同步)</li>
                <li><code>.number</code> 添加后 <code>v-model</code> 的值会是一个 Number 类型的值, 而不是 String 类型的值</li>
                <li><code>.trim</code> 添加后 <code>v-model</code> 的值会自动去掉前后的空格</li>
            </ul>
            <h6>其他</h6>
            分别设置 checkbox 的选中/未选中的值, <code>:true-value=".."</code> <code>:false-value=".."</code>. 如:
            <input type="checkbox" :true-value="other.trueValue" :false-value="other.falseValue" v-model="other.checkbox"> {{other.checkbox}}
        </div>
        <script type="text/javascript" src="form.js"></script>
    </body>
</html>